<template>
  <div class="told-info">
    <el-carousel class="carousel">
      <el-carousel-item v-for="(item,index) in toldList" :key="index">
        <div class="layout">
          <section class="basic">
            <header class="title">
              <i class="iconfont">&#xe65b;</i>
              <span class="title-name">[&nbsp;&nbsp;患者信息&nbsp;&nbsp;]</span>
            </header>
            <ul class="list">
              <li class="item">
                <span>姓名：</span>
                <span>{{item.toldInfo.patientName}}</span>
              </li>
              <li class="item">
                <span>年龄：</span>
                <span>{{item.toldInfo.age}}岁</span>
              </li>
              <li class="item">
                <span>现场地址：</span>
                <span>{{item.toldInfo.address}}</span>
              </li>
              <li class="item">
                <span>调度判断：</span>
                <span>{{item.toldInfo.dispatchJudge}}</span>
              </li>
              <li class="item">
                <span>病情：</span>
                <span class="diagnosis">{{item.toldInfo.conditionLevel}}</span>
              </li>
              <li class="item">
                <span>实际标识：</span>
                <span>{{item.toldInfo.ambNumber}}</span>
              </li>
              <li class="item">
                <span>派车时间：</span>
                <span>{{item.toldInfo.acceptOrderTime}}</span>
              </li>
            </ul>
          </section>
          <section class="sign">
            <header class="title">
              <img src="../assets/image/article.png" alt class="article" />
              <span class="title-name">[&nbsp;&nbsp;生命体征&nbsp;&nbsp;]</span>
            </header>
            <ul class="list">
              <li class="item">
                <span>血压：</span>
                <span>{{item.vitalSign.systolic}}/{{item.vitalSign.diastolic}}mmHg</span>
              </li>
              <li class="item">
                <span>心率</span>
                <span>{{item.vitalSign.heartRate}}mmHg</span>
              </li>
              <li class="item">
                <span>脉搏：</span>
                <span>{{item.vitalSign.pulse}}mmHg</span>
              </li>
              <li class="item">
                <span>呼吸：</span>
                <span>{{item.vitalSign.breath}}mmHg</span>
              </li>
              <li class="item">
                <span>体温：</span>
                <span>{{item.vitalSign.temperature}}mmHg</span>
              </li>
              <li class="item">
                <span>血氧饱和度：</span>
                <span>{{item.vitalSign.saturation}}mmHg</span>
              </li>
              <li class="item">
                <span>意识：</span>
                <span>{{item.vitalSign.mind}}mmHg</span>
              </li>
            </ul>
          </section>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "ToldInfo",
  computed: {
    toldList(){
      return this.$store.state.toldInfo;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.told-info {
  color: #fff;
  height: 92%;
  background: url("../assets/image/listbg.png");
  background-size: 100% 100%;
}
.carousel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.carousel >>> .el-carousel__container {
  flex-grow: 1;
}
.layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
}

.basic,
.sign {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}
.title {
  color: #35d4e0;
  display: flex;
  align-items: flex-end;
}
.title > .iconfont {
  font-size: 40px;
}
.title-name {
  border-bottom: 1px solid rgba(0, 189, 252, 0.5);
  flex-grow: 1;
  margin-left: 5px;
}
.article {
  width: 40px;
  height: 40px;
}

.list {
  padding: 15px 0;
  padding-left: 45px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.diagnosis {
  background: rgba(255, 78, 78, 1);
  padding: 2px 20px;
  border-radius: 10px;
}
</style>